<template>
	<view class="page">
		<view class="item" >
			<view class="row" style="justify-content: space-around;" >
				<view class="label weight">
					早餐: 1次
				</view>
				<view class="label weight">
					中餐: 1次
				</view>
				<view class="label weight">
					晚餐: 1次
				</view>
			</view>
		</view>
		
		<view class="item" v-for="(item,index) in orderArr" :key="index">
			<view class="row" >
				<view class="label">
					就餐日期:
				</view>
				<view class="val">
					{{item.date}}
				</view>
			</view>
			<view class="row" >
				<view class="label">
					餐段：
				</view>
				<view class="val" >
					{{item.mealName}}
					<!-- <text v-for="(item2,index2) in item.mealArr" :key="index2">{{item2}}</text> -->
				</view>
			</view>
			<!-- <view class="row" >
				<view class="label">
					订单时间：
				</view>
				<view class="val" >
					{{item.date}}
				</view>
			</view> -->
			<view class="row">
				<view class="btns">
					<view class="btn" @click="handleCancel(item.id)">
						<!-- 撤销退订 -->
						撤销预定
					</view>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	import {getTbAdvanceOrderApi,getMealtypeApi,singleSaveOrderApi} from '@/common/api/commonApi/commonApi.js'
	export default {
		data() {
			return {
				tomorrow : '',
				isOrder: true,
				orderArr : [
					{
						mealName:'早餐',
						date:'2024-3-8',
						mealArr:['馒头','肠粉','三明治']
					},
					{
						mealName:'晚餐',
						date:'2024-3-9',
						mealArr:['馒头','肠粉','三明治']
					},{
						mealName:'中餐',
						date:'2024-3-9',
						mealArr:['馒头','肠粉','三明治']
					},
				],
			}
		},
		methods: {
			handleCancel(){
				uni.showModal({
					content:'是否取消订单',
					success(res) {
						if(res.confirm){
							
						}
					}
				})
			},
			initInfo(){
				return getTbAdvanceOrderApi(this.tomorrow).then(res=>{
					if(!res.mealschedule.length) this.isOrder = false
					this.mealtype.forEach((item,index)=>{
						item.isOrder = false
						let tempIndex = res.orderList.findIndex(item2=>{
							return item.id == item2.mealTypeId
						})
						if(tempIndex != -1){
							item.isOrder = true
						}
						this.$set(this.mealtype,index,item)
					})
					console.log(this.mealtype);
					
				})
			},
			handleOrder(id){
				singleSaveOrderApi({
					eatDate : this.tomorrow,
					mealTypeId : id
				}).then(res=>{
					this.initInfo().then(res=>{
						this.setMessage('操作成功！')
					})
				})
			}
		},
		async onLoad() {
		
			// this.initInfo()
		},
		onShow() {
			
		},
	}
</script>

<style lang="scss" scoped>
	.weight{
		font-weight: 600;
	}
	
.page{
	.item{
		background-color: #fff;
		border-top: 2rpx solid #eaebef;
		margin: 20px;
		border-radius: 10px;
		padding: 15rpx 30rpx;
		.row{
			font-size: 32rpx;
			display: flex;
			
			// border-bottom: 2rpx solid #eaebef;
			.label{
				width: 180rpx;
				display: flex;
				align-items: center;
				padding-left: 20rpx;
				color: #555;
			}
			.val{
				flex: 1;
				padding: 15rpx 0;
				text{
					padding: 20rpx;
				}
			}
			.input{
				padding: 10rpx 0;
				flex: 1;
				display: flex;
				align-items: center;
			}
			
			.btns{
				width: 100%;
				display: flex;
				justify-content: flex-end;
				.btn{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 160rpx;
					height: 55rpx;
					color: #fff;
					border-radius: 10rpx;
					background-color: #ff9900;
					font-size: 28rpx;
				}
			}
		}
	}
}
</style>
